<!DOCTYPE html><html><head><meta charset=utf-8><title>Library Overview</title></head><body><h1> Library Overview</h1><p><a href='index.html'>Back to documentation index.</a></p><p><a id=Public_Domain_HTML_3D_Library></a></p>
<h2>Public-Domain HTML 3D Library</h2><p>This page will introduce the <a href="https://github.com/peteroupc/html3dutil/releases"><strong>HTML 3D Library</strong></a>, an open-source JavaScript library that I wrote.</p>
<p>This library contains classes and utility methods to ease the development of HTML 3D applications, such as Web sites, in browsers that support 3D drawing using the HTML5 Canvas.</p>
<p>The library differs from many others because this one is in the public domain, so no permission is required to use it.</p>
<p>This page includes information on how to use the HTML 3D library, an overview of its features, and an example of a simple 3D-enabled Web page.</p>
<p>NOTE: This section and the rest of this page will largely discuss the 2.0.0-beta3 version of the HTML 3D library, which differs considerably from the current release (version 1.5.1) of the library. (See the section &quot;History&quot; for more information.)</p>
<p><a id=Example></a></p>
<h2>Example</h2><p><img src="https://peteroupc.github.io/html3dutil/html3d.png" alt=""></p>
<p><a id=Contents></a></p>
<h2>Contents</h2><ul>
<li><a href="#Public_Domain_HTML_3D_Library">Public-Domain HTML 3D Library</a></li>
<li><a href="#Example">Example</a></li>
<li><a href="#Contents">Contents</a></li>
<li><a href="#How_to_Use">How to Use</a><ul>
<li><a href="#List_of_Classes">List of Classes</a></li>
<li><a href="#H3DU_Scene3D"><code>H3DU.Scene3D</code></a></li>
<li><a href="#The_Camera">The &quot;Camera&quot;</a></li>
<li><a href="#3D_Models">3D Models</a></li>
<li><a href="#Shapes">Shapes</a></li>
<li><a href="#The_Render_Loop">The Render Loop</a></li>
</ul>
</li>
<li><a href="#A_Skeleton_for_3D_Apps">A Skeleton for 3D Apps</a></li>
<li><a href="#Demos">Demos</a><ul>
<li><a href="#Simple_Demos">Simple Demos</a></li>
<li><a href="#Materials">Materials</a></li>
<li><a href="#Shapes_and_meshes">Shapes and meshes</a></li>
<li><a href="#Paths">Paths</a></li>
<li><a href="#Curves_and_Surfaces">Curves and Surfaces</a></li>
<li><a href="#Textures">Textures</a></li>
<li><a href="#Shaders">Shaders</a></li>
<li><a href="#Particle_Systems">Particle Systems</a></li>
<li><a href="#Loading_3D_Models">Loading 3D Models</a></li>
<li><a href="#Selecting_Objects">Selecting Objects</a></li>
<li><a href="#Lights">Lights</a></li>
<li><a href="#Text">Text</a></li>
<li><a href="#Projections">Projections</a></li>
<li><a href="#Miscellaneous">Miscellaneous</a></li>
</ul>
</li>
<li><a href="#Example_2">Example</a></li>
<li><a href="#History">History</a><ul>
<li><a href="#Version_2_0_0_beta3">Version 2.0.0-beta3</a></li>
<li><a href="#Version_2_0_0_beta2">Version 2.0.0-beta2</a></li>
<li><a href="#Version_2_0_0_beta1">Version 2.0.0-beta1:</a></li>
</ul>
</li>
</ul>
<p><a id=How_to_Use></a></p>
<h2>How to Use</h2><ol>
<li><a href="https://github.com/peteroupc/html3dutil/releases"><strong>Download the HTML 3D library</strong></a>.</li>
<li><p>Extract the file <i>&quot;h3du_min.js&quot;</i>, and write the following code in every HTML page where you will use the library.</p>
<pre class="prettyprint source"><code> &lt;script type=&quot;text/javascript&quot; src=&quot;h3du_min.js&quot;>&lt;/script></code></pre></li>
<li><p>Include an HTML 3D canvas somewhere on the Web page, since drawing 3D objects requires a 3D canvas. You may set its <code>width</code> and <code>height</code>. You should also give it an ID so you can refer to it more easily in your JavaScript code, as shown in this example.</p>
<pre class="prettyprint source"><code> &lt;canvas width=&quot;640&quot; height=&quot;480&quot; id=&quot;canvas&quot;>&lt;/canvas></code></pre></li>
<li><p>To use the HTML 3D library in JavaScript, either add the JavaScript code to the bottom of the page or use an event listener, as in this example:</p>
<pre class="prettyprint source"><code> &lt;script>
 window.addEventListener(&quot;load&quot;,function(){
   var scene=new Scene3D(document.getElementById(&quot;canvas&quot;));
   // We have the 3D scene, use it. (See the example code
   // at the bottom of this article for a more complete example.)
 })
 &lt;/script></code></pre></li>
</ol>
<p><a id=List_of_Classes></a></p>
<h3>List of Classes</h3><p>This is an overview of most of the JavaScript classes available in this library:</p>
<ul>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.html"><code>H3DU</code></a> - Contains various utility methods in the HTML 3D Library</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.Math.html"><code>H3DU.Math</code></a> - Contains math methods useful in 3D applications, such as matrices and vectors</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.Mesh.html"><code>H3DU.Mesh</code></a> - Helper class for building a 3D model</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.MeshBuffer.html"><code>H3DU.MeshBuffer</code></a> - Represents a 3D model</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.Meshes.html"><code>H3DU.Meshes</code></a> - Contains methods for generating common 3D models.</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.Material.html"><code>H3DU.Material</code></a>,
<a href="https://peteroupc.github.io/html3dutil/H3DU.PbrMaterial.html"><code>H3DU.PbrMaterial</code></a>,
<a href="https://peteroupc.github.io/html3dutil/H3DU.Texture.html"><code>H3DU.Texture</code></a> - Represents textures and colors for a 3D object's appearance.</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.Lights.html"><code>H3DU.Lights</code></a>,
<a href="https://peteroupc.github.io/html3dutil/H3DU.LightSource.html"><code>H3DU.LightSource</code></a> - Represents light sources</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.Batch3D.html"><code>H3DU.Batch3D</code></a> - Represents a collection of shapes to draw and a projection and view.</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.FrameBufferInfo.html"><code>H3DU.FrameBufferInfo</code></a> - Describes a frame buffer, or an offscreen buffer for rendering graphics content.</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.ShaderInfo.html"><code>H3DU.ShaderInfo</code></a> - Represents a GLSL shader program</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.Shape.html"><code>H3DU.Shape</code></a> - Represents an instance of a 3D shape with its own transform and appearance</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.ShapeGroup.html"><code>H3DU.ShapeGroup</code></a> - Represents a group of 3D shapes</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.BSplineCurve.html"><code>H3DU.BSplineCurve</code></a>,
<a href="https://peteroupc.github.io/html3dutil/H3DU.BSplineSurface.html"><code>H3DU.BSplineSurface</code></a>,
<a href="https://peteroupc.github.io/html3dutil/H3DU.CurveBuilder.html"><code>H3DU.CurveBuilder</code></a>,
<a href="https://peteroupc.github.io/html3dutil/H3DU.SurfaceBuilder.html"><code>H3DU.SurfaceBuilder</code></a> - Supports generating parametric curves and surfaces</li>
</ul>
<p>The following classes concern themselves with the HTML 3D canvas context:</p>
<ul>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.Scene3D.html"><code>H3DU.Scene3D</code></a> - Holds an HTML 3D canvas context (GL context).</li>
<li><a href="https://peteroupc.github.io/html3dutil/H3DU.TextureLoader.html"><code>H3DU.TextureLoader</code></a> - Caches textures loaded by the application and maps them to GL contexts.</li>
</ul>
<p>For much more information on all of these classes, see my <a href="https://peteroupc.github.io/html3dutil">documentation for the HTML 3D library</a>.</p>
<p>The following sections detail how a 3D application using this library works.</p>
<p><a id=H3DU_Scene3D></a></p>
<h3><code>H3DU.Scene3D</code></h3><p>The <code>H3DU.Scene3D</code> class is a renderer for a canvas GL context. It renders batches of 3D shapes
in the form of <code>H3DU.Batch3D</code> objects.  Each <code>Batch3D</code> represents a so-called &quot;scene graph&quot;. It holds
3D objects which will be drawn to the screen, as well as the camera's projection, the camera's
position, and light sources to illuminate the 3D scene.</p>
<p>To create a <code>H3DU.Scene3D</code>, you first need to find the HTML canvas in your JavaScript, then you
need to pass it to <code>new Scene3D()</code>. Once you do so, <code>H3DU.Scene3D</code> will use that canvas to draw
3D objects. Here is an example. You will also need to create a <code>H3DU.Batch3D</code> to hold 3D objects.</p>
<pre class="prettyprint source"><code>// Find the HTML canvas with the ID &quot;canvas&quot;.
var canvas=document.getElementById(&quot;canvas&quot;)
// Create a 3D scene using that canvas.
var scene=new H3DU.Scene3D(canvas);
var batch=new H3DU.Batch3D();</code></pre><p><a id=The_Camera></a></p>
<h3>The &quot;Camera&quot;</h3><p>The <code>H3DU.Batch3D</code> class has a concept of a &quot;projection transform&quot; and a &quot;view transform&quot;. If we
use the concept of a &quot;camera&quot;, the projection is like setting the camera's focus and lens, and the view transform is like setting its position and orientation. <code>H3DU.Batch3D</code> has methods for setting all these attributes of this abstract &quot;camera&quot;. Two of them are <code>perspectiveAspect()</code> and <code>setLookAt()</code>, which are shown in the example below.</p>
<pre class="prettyprint source"><code>// Set the perspective view. Camera has a 45-degree field of view
// and will see objects from 0.1 to 100 units away.
batch.perspectiveAspect(45,0.1,100);
// Move the camera back 40 units.
batch.setLookAt([0,0,40]);
// Move the camera back 30 units instead, and turn it so it
// points at (0, 2, 0), that is, up 2 units.
batch.setLookAt([0,0,30], [0,2,0]);</code></pre><p>For more information, see <em><a href="http://www.codeproject.com/Tips/989978/The-Camera-and-the-Projection-and-View-Transforms">The &quot;Camera&quot; and Geometric Transforms</a></em>.</p>
<p><a id=3D_Models></a></p>
<h3>3D Models</h3><p>Every 3D scene is made up of &quot;meshes&quot;, or the triangles, lines, and points that make up a geometric three-dimensional object. Meshes can be simple, such as a cube, or very complex, such as a town model complete with houses. You create a mesh using the <code>H3DU.Mesh</code> class, or create a built-in geometric shape using a method in the <code>H3DU.Meshes</code> class. The example below shows how you can create a box mesh:</p>
<pre class="prettyprint source"><code>// Create a box mesh 10 units in width, 20 units
// in height, and 25 units in depth
var mesh=H3DU.Meshes.createBox(10,20,25);</code></pre><p>Here are some other built-in mesh methods. This page doesn't explain all the
features or parameters in the <code>Meshes</code> class; for that, see the
<a href="http://peteroupc.github.io/html3dutil/H3DU.Meshes.html">Meshes API documentation</a>.</p>
<ul>
<li><dfn><code>H3DU.Meshes.createSphere(radius)</code></dfn>
<br>Creates a sphere with the given <code>radius</code>.</li>
<li><dfn><code>H3DU.Meshes.createCylinder(base, top, height)</code></dfn>
<br>Creates a cylinder with the given <code>base</code> radius, <code>top</code> radius, and <code>height</code>. Can be used
to create a cone if <code>base</code> or <code>top</code> is <code>0</code>.</li>
<li><dfn><code>H3DU.Meshes.createClosedCylinder(base, top, height)</code></dfn>
<br>Like <code>createCylinder</code>, except it also covers the base and top.</li>
<li><dfn><code>H3DU.Meshes.createPartialDisk(inner, outer, start, sweep)</code></dfn>
<br>Creates a circular ring, of radius <code>outer</code> with a hole of radius <code>inner</code>, starting at <code>start</code>
degrees and sweeping <code>sweep</code> degrees.</li>
<li><dfn><code>H3DU.Meshes.createDisk(inner, outer)</code></dfn>
<br>Same as calling <code>createPartialDisk</code> with <code>start</code> 0 and <code>sweep</code> 360.</li>
</ul>
<p>For more information on meshes, see <a href="http://www.codeproject.com/Tips/987914/Creating-shapes-using-the-Public-Domain-HTML-D-Lib"><em>Creating shapes using the Public Domain HTML 3D Library</em></a>.</p>
<p><a id=Shapes></a></p>
<h3>Shapes</h3><p>Once a mesh is created, it needs to be added to the 3D scene in order to be rendered.
Use the <code>H3DU.Shape</code> constructor method to convert the mesh to a shape. Then you can set the shape's properties such as color, size, and position. Then, call <code>addShape()</code> to add the shape to the 3D object batch.</p>
<pre class="prettyprint source"><code>// Create a shape based on the mesh
var shape=new H3DU.Shape(mesh);
// Make it red (you can also use the HTML color string
// &quot;#FF0000&quot; instead)
shape.setColor(&quot;red&quot;);
// Move it 1 unit along the X axis
shape.setPosition(1,0,0);
// Add the shape to the scene
batch.addShape(shape);</code></pre><p>The appearance of a 3D shape is known in the 3D graphics world as a &quot;material&quot;. It includes textures (images), colors, and light reflection parameters. The <a href="http://peteroupc.github.io/html3dutil/H3DU.Material.html"><code>Material</code></a> class holds data on some of these parameters, and is part of the definition of a shape. The <a href="http://peteroupc.github.io/html3dutil/H3DU.PbrMaterial.html"><code>PbrMaterial</code></a> class does the same, but uses physically-based shading algorithms.</p>
<p>Here are details on some of the <code>Shape</code> class's methods.</p>
<ul>
<li><dfn><code>shape.setPosition(x, y, z)</code></dfn>
<br>Sets the shape's position to the given coordinates.</li>
<li><dfn><code>shape.setScale(x, y, z)</code></dfn>
<br>Sets the shape's scaling along the x, y, and z axes. Examples: (1, 1, 1) means no scaling, (2, 1, 1) means a doubled width, (1, 1, 0.5) means a halved depth.</li>
<li><dfn><code>shape.getTransform().setRotation(angle, x, y, z)</code></dfn>
<br>Sets the shape's rotation given an angle in degrees, and an axis of rotation (the x, y, and z parameters). Example: (40, 1, 0, 0) means a 40-degree rotation around the X axis (x is 1 in the axis of rotation).</li>
<li><dfn><code>shape.setColor(color)</code></dfn>
<br>Gives the shape a particular color. <code>color</code> can be an HTML color (&quot;#ff0000&quot;), CSS color (&quot;red&quot;), RGB color(&quot;rgb(20, 30, 40)&quot;) or HSL color(&quot;hsl(20, 50%, 50%)&quot;), or a set of values from 0 to 1 (example: <code>[1.0,0.5,0.0]</code>).
See my <a href="https://peteroupc.github.io/html3dutil/tutorial-colors.html">colors tutorial</a>.</li>
<li><dfn><code>shape.setTexture(name)</code></dfn>
<br>Gives the shape a particular texture, with the URL <code>name</code>. The texture should be in the same origin as the Web page (which usually means the same directory).</li>
<li><dfn><code>shape.copy()</code></dfn>
<br>Creates a copy of this shape. Can be more efficient than calling <code>new H3DU.Shape</code> if the same geometric mesh will be used more than once in the same 3D scene, with different positions and attributes.</li>
</ul>
<p><a id=The_Render_Loop></a></p>
<h3>The Render Loop</h3><p>An important part of a 3D application is the render loop. The render loop is a block of code that is called many times a second (or many &quot;frames&quot; a second) to redraw the 3D scene. Each frame, the state of the application is updated, and the 3D scene is re-rendered to account for that state. To render a scene, use the <code>H3DU.Scene3D.render()</code> method, passing a batch of shapes to render. Render loops are created using the <code>H3DU.renderLoop()</code> method. Here is an example of a render loop.</p>
<pre class="prettyprint source"><code>// Set up the render loop
H3DU.renderLoop(function(time){
 // This will be called once each frame.
 // Here, we render the scene
 scene.render(batch);
});</code></pre><p>The render loop method takes a parameter (here &quot;time&quot;), containing the number of milliseconds since the page was started.&nbsp; This can be used to implement frame-rate independent animations.</p>
<p><a id=A_Skeleton_for_3D_Apps></a></p>
<h2>A Skeleton for 3D Apps</h2><p>The following is a minimal skeleton you can use for writing HTML apps using this library.</p>
<pre class="prettyprint source"><code>&lt;head>
&lt;meta charset=utf-8>
&lt;meta name=&quot;viewport&quot; content=&quot;user-scalable=no,initial-scale=1,maximum-scale=1&quot;>
&lt;script type=&quot;text/javascript&quot; src=&quot;h3du_min.js&quot;>&lt;/script>
&lt;/head>
&lt;body style=&quot;margin:0px&quot;>
&lt;canvas id=canvas style=&quot;width:100%; height:100%; overflow: hidden;&quot;>&lt;/canvas>
&lt;script>
// Your script goes here
&lt;/script>
&lt;/body></code></pre><p><a id=Demos></a></p>
<h2>Demos</h2><p>The following are HTML Web pages showing a variety of features of the HTML 3D library. Each demo includes a link to access source code for that demo.</p>
<p><a id=Simple_Demos></a></p>
<h3>Simple Demos</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/simple.html">demos/simple.html</a> - A simple demo using this library.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/triangle.html">demos/triangle.html</a> - Demonstrates drawing a triangle.</li>
</ul>
<p><a id=Materials></a></p>
<h3>Materials</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/selfpulse.html">demos/selfpulse.html</a> - Demonstrates
a rotating, pulsating box.</li>
</ul>
<p><a id=Shapes_and_meshes></a></p>
<h3>Shapes and meshes</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/compositeMesh.html">demos/compositeMesh.html</a> - Demonstrates
combining multiple meshes into one.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/shapes.html">demos/shapes.html</a> - Demonstrates
the built-in shapes.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/newshapes.html">demos/newshapes.html</a> - Fancier
demo of some of the built-in shapes.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/builtinshapes.html">demos/builtinshapes.html</a> - Interactive demo of
the built-in shapes.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/platonic.html">demos/platonic.html</a> - A demo featuring the five
platonic solids. Demonstrates:<ul>
<li>How vertex and index arrays are built up to create geometric meshes, and</li>
<li>How to position HTML elements on top of 3D models based on their 3D positions.</li>
</ul>
</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/clock.html">demos/clock.html</a> - A demo
featuring a wall clock.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/gears.html">demos/gears.html</a> - A demonstration of rotating gears.</li>
</ul>
<p><a id=Paths></a></p>
<h3>Paths</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/marchingdots.html">demos/marchingdots.html</a> - Demo
of a series of dots following a path like marching ants. Shows some of the functionality of graphics paths.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/polyclip.html">demos/polyclip.html</a> -
Similar to &quot;marchingdots.html&quot;, but now uses the union of two circles as a path to demonstrate polygon
clipping.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/pathtube.html">demos/pathtube.html</a> - Demo
of a tube formed by a path curve.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/pathshapes.html">demos/pathshapes.html</a> - Demo
of 3D and 2D shapes generated by a 2D path.</li>
</ul>
<p><a id=Curves_and_Surfaces></a></p>
<h3>Curves and Surfaces</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/surfaces.html">demos/surfaces.html</a> - Demonstrates
using evaluators to generate parametric surfaces.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/curves.html">demos/curves.html</a> - Demonstrates
using evaluators to generate parametric curves.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/surfacesexpr.html">demos/surfacesexpr.html</a> - Demonstrates
parametric surfaces, with a custom formula editor.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/curvesexpr.html">demos/curvesexpr.html</a> - Demonstrates
parametric curves, with a custom formula editor.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/implicit.html">demos/implicit.html</a> - Demonstrates
implicit surfaces.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/invoevo.html">demos/invoevo.html</a> - Demonstrates drawing certain custom curves.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/drawingtoy.html">demos/drawingtoy.html</a> - Draws a design that's reminiscent of a popular drawing toy.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/bsplinecircles.html">demos/bsplinecircles.html</a> - Demonstrates how circles and ellipses can be generated using the <code>BSplineCurve</code> class.</li>
</ul>
<p><a id=Textures></a></p>
<h3>Textures</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/textured.html">demos/textured.html</a> - Demonstrates loading textures
and applying them to 3D shapes.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/specular.html">demos/specular.html</a> - Demonstrates using
textures as specular reflection maps.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/normalmap.html">demos/normalmap.html</a> - Demonstrates using
normal map textures.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/gradient.html">demos/gradient.html</a> - Demonstrates generating a custom
texture -- a linear gradient from one color to another.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/skysphere.html">demos/skysphere.html</a> - Demonstrates how to
implement a 360-degree background texture -- a <em>sky sphere</em> -- using custom shader materials.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/procedtexture.html">demos/procedtexture.html</a> - Demonstrates how to apply a shader-generated texture to a 3D shape.</li>
</ul>
<p><a id=Shaders></a></p>
<h3>Shaders</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/squares.html">demos/squares.html</a> - Demonstrates shader-based filters.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/gears.html">demos/raymarch.html</a> - A demonstration of the following:<ul>
<li>Custom shaders in HTML <code>script</code> blocks.</li>
<li>The &quot;ray marching&quot; technique for procedural 3D content.</li>
</ul>
</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/checkerboard.html">demos/checkerboard.html</a> - Shader for generating a checkerboard texture.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/gradient2.html">demos/gradient2.html</a> - Shader-based version of the &quot;gradient&quot; demo.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/marble.html">demos/marble.html</a> - Shader for generating a marble background.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/marble2.html">demos/marble2.html</a> - Another shader for generating a marble background.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/wood.html">demos/wood.html</a> - Shader for generating a wood background.</li>
</ul>
<p><a id=Particle_Systems></a></p>
<h3>Particle Systems</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/tris.html">demos/tris.html</a> - Demonstrates a particle system.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/fallingballs.html">demos/fallingballs.html</a> - Demonstrates falling balls
of different sizes.</li>
</ul>
<p><a id=Loading_3D_Models></a></p>
<h3>Loading 3D Models</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/obj.html">demos/obj.html</a> - An object file loader.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/stl.html">demos/stl.html</a> - Demonstrates loading 3D models.</li>
</ul>
<p><a id=Selecting_Objects></a></p>
<h3>Selecting Objects</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/picking.html">demos/picking.html</a>,  <a href="https://peteroupc.github.io/html3dutil/demos/picking2.html">demos/picking2.html</a>,
<a href="https://peteroupc.github.io/html3dutil/demos/picking3.html">demos/picking3.html</a> - These demos demonstrate how object picking can be implemented.</li>
</ul>
<p><a id=Lights></a></p>
<h3>Lights</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/animation-light.html">demos/animation-light.html</a> - Much like <em>animation.html</em>, but illuminated using a point light.</li>
</ul>
<p><a id=Text></a></p>
<h3>Text</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/textwith3d.html">demos/textwith3D.html</a> - Demonstrates loading bitmap fonts and displaying text with them. Demonstrates showing bitmap font text on top of a 3D animation.</li>
</ul>
<p><a id=Projections></a></p>
<h3>Projections</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/perspective.html">demos/perspective.html</a> - Demonstrates a perspective projection.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/animation-isometric.html">demos/animation-isometric.html</a> - Much like <em>animation.html</em>, but demonstrates an isometric projection.</li>
</ul>
<p><a id=Miscellaneous></a></p>
<h3>Miscellaneous</h3><ul>
<li><a href="https://peteroupc.github.io/html3dutil/demos/background.html">demos/background.html</a> - A demo
featuring a background with continuously drawn 3D shapes.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/animation.html">demos/animation.html</a> - A demo
illustrating a simple animation of 3D shapes.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/starfield.html">demos/starfield.html</a> - Demo of a star field.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/quatlerp.html">demos/quatlerp.html</a> - Demonstrates
the difference between <a href="H3DU.Math.html#H3DU.Math.quatNlerp">H3DU.Math.quatNlerp</a> and <a href="H3DU.Math.html#H3DU.Math.quatSlerp">H3DU.Math.quatSlerp</a>,
both functions for interpolating quaternion rotations.</li>
<li><a href="https://peteroupc.github.io/html3dutil/demos/underlay.html">demos/underlay.html</a> - Shows how
<a href="H3DU.RenderPass.html">H3DU.RenderPass</a> can be used to draw a two-dimensional background under three-dimensional
content.</li>
</ul>
<p><a id=Example_2></a></p>
<h2>Example</h2><p>The following is a simple example of an HTML page that uses the HTML 3D library. It sets up the 3D scene, generates a 3D box, colors it red, and rotates it each frame as time passes. Look at the comments; they explain better what each part of the code is doing. Also note the <code>&lt;canvas&gt;</code> element it uses on the page.</p>
<pre class="prettyprint source"><code>&lt;head>
&lt;script type=&quot;text/javascript&quot; src=&quot;h3du_min.js&quot;>&lt;/script>
&lt;/head>
&lt;body>
&lt;canvas width=&quot;600&quot; height=&quot;450&quot; id=canvas>&lt;/canvas>
&lt;script>
 // Create the 3D scene; find the HTML canvas and pass it
 // to Scene3D.
 var scene=new H3DU.Scene3D(document.getElementById(&quot;canvas&quot;));
 var sub=new H3DU.Batch3D();
  // Set the perspective view. Camera has a 45-degree field of view
  // and will see objects from 0.1 to 100 units away.
  .perspectiveAspect(45,0.1,100)
  // Move the camera back 40 units.
  .setLookAt([0,0,40]);
sub.getLights().setBasic();
 // Create a box mesh 10 units in size
 var mesh=H3DU.Meshes.createBox(10,20,20);
 // Create a shape based on the mesh and give it a red color
 var shape=new H3DU.Shape(mesh).setColor(&quot;red&quot;);
 // Add the shape to the scene
 sub.addShape(shape);
 // Create a timer
 var timer={};
 // Set up the render loop
 H3DU.renderLoop(function(time){
  // Update the shape's rotation
  var q=H3DU.Math.quatFromTaitBryan(
    360*H3DU.getTimePosition(timer,time,6000),
    360*H3DU.getTimePosition(timer,time,12000),
    0
  );
  shape.setQuaternion(q);
  // Render the scene
  scene.render(sub);
});
//-->
&lt;/script>
&lt;/body></code></pre><p><a id=History></a></p>
<h2>History</h2><p><a id=Version_2_0_0_beta3></a></p>
<h3>Version 2.0.0-beta3</h3><p>The changes in beta 3 from beta 2 include:</p>
<ul>
<li>The main library files were converted to ECMAScript's import/export convention.  The <code>rollup</code> tool
is used to help generate the <code>h3du_min.js</code> file.</li>
<li>HTML documentation included in distribution.</li>
<li>&quot;Norm&quot; methods in H3DU.Math were renamed to use &quot;Normalize&quot; instead.</li>
<li>New <code>convex.js</code> in extras folder generates the convex hull of a set of points.</li>
<li>New <code>interp.js</code> in extras folder provides a cubic B&eacute;zier interpolation function.</li>
<li>New <code>spline.js</code> in extras folder generates piecewise interpolating curves.</li>
<li>New demos added, including demos showing how to generate procedural content using shaders.</li>
<li>Several methods in H3DU.GraphicsPath were reimplemented.</li>
<li>H3DU.BezierCurve and H3DU.BezierSpline are deprecated.</li>
<li>H3DU.CurveBuilder and H3DU.SurfaceBuilder classes were created; they replace now-deprecated
H3DU.CurveEval and H3DU.SurfaceEval classes.</li>
<li>H3DU.MeshBuffer contains many new methods; in exchange, many of the H3DU.Mesh
methods reimplemented in H3DU.MeshBuffer are deprecated.</li>
<li>H3DU.Mesh is considerably deemphasized in this version; that class should only be used
for building meshes, not storing them.</li>
<li>H3DU.Curve and H3DU.Surface were created; these classes represent parametric curves
 and surfaces and offer methods for querying information at a given point on the curve or surface.
 Made several class derive from either class, including H3DU.BSplineCurve, H3DU.BSplineSurface,
 and new class H3DU.PiecewiseCurve.</li>
<li>H3DU.RenderPass3D renamed to H3DU.RenderPass.</li>
<li>Deleted fromBasic and fromBasicTexture methods from H3DU.PbrMaterial.</li>
<li>Added JOINTS and WEIGHTS constants to H3DU.Semantic.</li>
<li>Preliminary support for occlusion maps.</li>
<li>Default diffuse/albedo in Material and PbrMaterial is now (1,1,1,1).</li>
<li>New H3DU.BufferAccessor class represents a single vertex buffer.</li>
<li>Many methods outside H3DU.Mesh now return H3DU.MeshBuffer instead of H3DU.Mesh.</li>
<li>Bug fixes.</li>
</ul>
<p><a id=Version_2_0_0_beta2></a></p>
<h3>Version 2.0.0-beta2</h3><p>The changes in beta 2 from beta 1 include:</p>
<ul>
<li>Added H3DU.PbrMaterial class and supported physically-based shading in the default shader.</li>
<li>H3DU.Shape objects contain H3DU.PbrMaterial by default.</li>
<li>Extras folder contains a glTF loader, which is preliminary and incomplete.</li>
<li>H3DU.Scene3D will create a WebGL 2 rendering context if possible and supported by the browser.</li>
<li>H3DU.MeshBuffer stores vertex data by semantic (such as position, normal or texture coordinates), rather than by name.</li>
<li>The new H3DU.Semantic class contains constants for attribute and uniform semantics.</li>
<li>The new H3DU.TextureInfo class is a lightweight class for storing a texture's settings, but not its data.</li>
<li>H3DU.ShaderInfo class can now accept H3DU.TextureInfo objects as uniform values.</li>
<li>H3DU.Material can accept a parameter object in the constructor as it can in the setParams method, similarly to the
new H3DU.PbrMaterial class.</li>
<li>Added fromBasic and fromBasicTexture methods to H3DU.Material class.</li>
<li>Many new methods were added to the H3DU.Math class, including methods to add and
 subtract 4-element vectors, to clamp vectors, and to convert to and from linear RGB colors,
 as well as vec3proj, vec4proj, mat3invert, and vec3fromWindowPoint methods.
 The frustumHasBox method was improved.</li>
<li>The shapeCount, getShape, setShape, and copy methods were added to H3DU.ShapeGroup.</li>
<li>New H3DU.CubeMap class holds information on the textures that make up a cube map.
 However, cube maps are not yet supported in the default shader (its code is
 currently commented out)</li>
<li>In the H3DU.GraphicsPath extra, added methods for high-level shapes and path
 interpolation and improved code on path triangulation.</li>
<li>H3DU.TextFont extra supports multichannel signed distance field fonts.</li>
<li>Several new demos were added.</li>
<li>Some methods were removed: setMaterialParams methods from both H3DU.Shape and H3DU.ShapeGroup; mapTexture and mapTexturesAll methods from TextureLoader; and forShader method from H3DU.Material.</li>
<li>Renamed setOrientation and multOrientation in H3DU.Transform to setRotation and multRotation, and deprecated the old names.</li>
<li>Bug fixes.</li>
</ul>
<p><a id=Version_2_0_0_beta1></a></p>
<h3>Version 2.0.0-beta1:</h3><ul>
<li>All classes in the main library are moved to a new namespace called <code>H3DU</code>.  For example, <code>Shape</code> is now <a href="H3DU.Shape.html">H3DU.Shape</a> and <code>Mesh</code> is now <a href="H3DU.Mesh.html">H3DU.Mesh</a>.  Many classes in the &quot;extras&quot; directory are also moved to the <code>H3DU</code> namespace.</li>
<li><code>Scene3D</code>, now <a href="H3DU.Scene3D.html">H3DU.Scene3D</a>, is no longer meant to be a scene graph of objects to draw. That job now belongs to the new <a href="H3DU.Batch3D.html">H3DU.Batch3D</a> class. Scene3D's <code>render</code> method now takes an array of <code>Batch3D</code>s to render. For compatibility, though, the methods allowing it to manage 3D models and the coordinate system, such as <code>makeShape</code> and <code>setPerspective</code>, can still be used until <code>H3DU.Scene3D</code> renders a custom <code>H3DU.Batch3D</code>. This compatibility behavior may be dropped in the future.</li>
<li>Alpha is disabled in WebGL contexts created with the <a href="H3DU.html#H3DU.get3DOr2DContext">H3DU.get3DOr2DContext</a> method.</li>
<li>The <code>Scene3D</code> <a href="H3DU.Scene3D.html#H3DU.Scene3D_useProgram">H3DU.Scene3D#useProgram</a> method was deprecated and now does nothing.</li>
<li>New <a href="H3DU.RenderPass.html">H3DU.RenderPass</a> class holds information about how a batch of 3D models is to be rendered. It replaces the <code>Scene3D</code> <a href="H3DU.Scene3D.html#H3DU.Scene3D_useFilter">H3DU.Scene3D#useFilter</a> method, which now does nothing.</li>
<li>New <a href="H3DU.FrameBufferInfo.html">H3DU.FrameBufferInfo</a> class holds information about a frame buffer; it replaces <a href="H3DU.FrameBuffer.html">H3DU.FrameBuffer</a>.</li>
<li>The <code>BufferedMesh</code>, <code>FrameBuffer</code>, and <code>ShaderProgram</code> classes are deprecated because they are too tightly coupled with a particular WebGL context. Instead, use <a href="H3DU.MeshBuffer.html">H3DU.MeshBuffer</a>, <a href="H3DU.FrameBufferInfo.html">H3DU.FrameBufferInfo</a>, and <a href="H3DU.ShaderInfo.html">H3DU.ShaderInfo</a>, respectively, which are not coupled to WebGL contexts.</li>
<li>Rendering can make use of vertex array objects internally, if supported by the WebGL implementation.</li>
<li>The <a href="H3DU.Shape.html">H3DU.Shape</a> object is no longer coupled to vertex buffers.</li>
<li>The <a href="H3DU.LightSource.html">H3DU.LightSource</a> class now supports a radius of the light.</li>
<li>The <a href="H3DU.TextureLoader.html">H3DU.TextureLoader</a> class was added for loading textures; a single object of this class can load and upload images from multiple WebGL contexts. This is unlike <code>BufferedMesh</code>, <code>FrameBuffer</code>, and <code>ShaderProgram</code>, which are tied to the WebGL context.</li>
<li><code>GLMath</code>, now <a href="H3DU.Math.html">H3DU.Math</a>, was expanded with many new methods. The documentation for it is now very detailed. New methods include <a href="H3DU.Math.html#H3DU.Math.vec3perp">H3DU.Math.vec3perp</a>, <a href="H3DU.Math.html#H3DU.Math.vec3toWindowPoint">H3DU.Math.vec3toWindowPoint</a>, and <a href="H3DU.Math.html#H3DU.Math.mat4projectVec3">H3DU.Math.mat4projectVec3</a>.</li>
<li>Two new classes in the &quot;extras&quot; folder support 2D text rendering and texture atlases (as sprite sheets), namely, <a href="H3DU.TextFont.html">H3DU.TextFont</a> and <a href="H3DU.TextureAtlas.html">H3DU.TextureAtlas</a>.</li>
<li>The &quot;doc&quot; folder contains the documentation to the library in the form of Markdown text files.</li>
<li>The Camera class, now <a href="H3DU.Camera.html">H3DU.Camera</a>, was rewritten.</li>
<li>A build script was included in the repository. This build includes a style checker which is run on the library's JavaScript files.</li>
<li>Many methods were added to many classes. Some methods that didn't return a value now return the value of the object called on, for example, the <code>clear</code> method of <code>H3DU.Scene3D</code>.</li>
<li>New demos, including <em>spinbox.html</em> and <em>quatlerp.html</em>.  For example, the <em>gears.html</em> demo was moved from the separate &quot;html-gears&quot; repository to here. Other demos were expanded or rewritten. Viewport <code>meta</code> tags were added to the demos.</li>
<li>The underlying code used in <code>H3DU.toGLColor</code> was rewritten.  In particular, the &quot;#RRGGBBAA&quot; format is now supported.</li>
<li>The JavaScript source code better conforms to a uniform code style.</li>
<li>The experimental 2D canvas renderer in <em>surfaces2d.html</em>, was abandoned.</li>
<li>Added <code>dispose</code> method to <code>H3DU.Scene3D</code>.</li>
<li>Added <code>createPointedStar</code> and <code>createLathe</code> methods to <code>H3DU.Meshes</code>.</li>
<li>Added <code>getBounds</code> and <code>toLinePath</code> methods to <a href="H3DU.GraphicsPath.html">H3DU.GraphicsPath</a>, an extra, as well
as an extra that adds methods that compute the intersection, difference, union, and XOR of two
polygons. Path triangulation now supports polygons with holes.</li>
<li>The default light configuration is no lights when creating a <a href="H3DU.LightSource.html">H3DU.LightSource</a>. The exception, for compatibility purposes, is when using a <a href="H3DU.Scene3D.html">H3DU.Scene3D</a> without rendering a custom <code>Batch3D</code>, in which case the default is one light source with its default values.</li>
<li>The default value for specular materials (<a href="H3DU.Material.html">H3DU.Material</a>) is now (0.1, 0.1, 0.1). The default value for shininess is now 32.</li>
<li>The Mesh class no longer supports multiple primitive types (lines, triangles, points). Using different modes that use the same primitive type (for example, <code>TRIANGLE_FAN</code> and <code>QUAD_STRIP</code>) in the same mesh is still supported.</li>
<li>Many of the tutorials were edited heavily to accommodate the new version. The <code>GraphicsPath</code> tutorial was added.</li>
<li>There were also numerous bug fixes.</li>
<li>A known issue: When using the <a href="H3DU.Camera.html">H3DU.Camera</a> in conjunction with the compatibility behavior of <a href="H3DU.Scene3D.html">H3DU.Scene3D</a>, only one side of the scene will appear lighted by default.</li>
</ul>
<p>See <a href="https://peteroupc.github.io/html3dutil/tutorial-history.html">older version history</a>.</p><p><a href='index.html'>Back to documentation index.</a></p></body></html>
